<template>
	<view class="container999">
		<zwyList ref="zwyList" :noMore="noMore" @loadMore="getList" :listLength="listLength" @refresh="getList('refresh')">
			<navTop title="观看历史" :showBack="false"></navTop>
			<view class="content">
				<view class="lineBox">
					<view class="line" v-for="(item,index) in historyList" @click="toDetail(item)" :key="index">
						<view class="lineLeft"><image style="width: 142rpx; height: 188rpx;border-radius: 10rpx;" lazy-load :src="item.coverImgUrl"></image></view>
						<view class="lineMid">
							<text class="lineTitle">{{ item.title }}</text>
							<view class="lineNum">
								<text class="lineNum" v-if="item.alreadyWatchSequence">看到第{{ item.alreadyWatchSequence + 1 }}集</text>
							</view>
							<view class="lineHas">
								<text style="font-size: 24rpx; color: #000000">更新至</text>
								<text style="font-weight: bold; font-size: 26rpx; color: #000000">第{{ item.updateOfEpisodes }}集</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</zwyList>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			listLength: 0,
			noMore: 0,
			historyList: [],
			pageNum: 1,
			pageSize: 10
		};
	},
	methods: {
		toDetail(item) {
			console.log('item', item);
			this.zwyRouter(`../video/video?fakeId=${item.fakeId}&compilationId=${item.compilationId}`);
		},
		async getList(type) {
			console.log('getList');
			if (type == 'refresh') {
				this.noMore = 2;
				this.pageNum = 1;
			} else {
				this.noMore = 2;
			}
			this.zwyRequest({
				url: `/cdp/user_history/compilations?pageNum=${this.pageNum}&pageSize=10`
			}).then(res => {
				console.log('getList', res);
				if (res) {
					let tempList;
					if (type == 'refresh') {
						tempList = res;
					} else {
						tempList = this.historyList.concat(res);
					}
					let tempMore = 0;
					this.pageNum++;
					if (res.length < 10) {
						tempMore = 1;
					}
					this.$refs.zwyList.endAfter();
					this.historyList = tempList;
					this.noMore = tempMore;
					this.listLength = tempList.length;
				}
			});
		}
	},
	onShareAppMessage: function () {
	    var shareJson = {
	      path: '/pages/fx_xjc/fx_xjc',
	      data: {
			page: 'hj_history',
	        sharePosition: '/pages/fx_xjc/fx_xjc',
	        'from': '/position/share/share',
	        sharePage: '/pages/fx_xjc/fx_xjc',
	      }
	    }
		// 达人分享批次
        console.log(getApp().globalData.shareBatchId)
        if(getApp().globalData.shareBatchId) {
            shareJson.channel = 'video'
            shareJson.extra = {
                hashtag_list: ['精彩短剧热播中👈']
            }
        }
	    shareJson.title = '精彩短剧热播中👈';
	    return this.formatShare(shareJson)
	},
	created() {
		this.getList('refresh');
	}
};
</script>

<style lang="scss">
.barMargin {
	width: 100%;
	height: 100rpx;
}
.content {
	padding: 30rpx;
	flex-direction: column;
}
.lineBox {
	flex-direction: column;
}
.noData {
	width: 100%;
	height: 400rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.container {
	height: 100%;
	width: 100%;
	flex-direction: column;
}

.noMore {
	width: 100%;
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
page {
	background-color: white !important;
	border-top: 1rpx solid #f6f6f6;
}
.line {
	display: flex;
	margin-top: 29rpx;
}
.lineHas {
	font-size: 22rpx;
	color: #424242;
}
.lineTitle {
	font-size: 33rpx;
	color: #000000;
}
.lineNum {
	padding: 18rpx 0 20rpx 0;
	font-size: 26rpx;
	color: #ff7200;
}
.lineLeft {
	width: 27%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lineMid {
	margin-left: 20rpx;
	flex-direction: column;
}
.lineRight {
	width: 30%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
.lineBtn {
	display: flex;
	width: 164rpx;
	height: 64rpx;
	font-size: 23rpx;
	align-items: center;
	justify-content: center;
	background-color: #ff7200;
	color: white;
	border-radius: 10rpx;
}
</style>
